<section id="rrat-flow">
	<page-tab :data="menuList" @on-item-click="handleTabClick" prefix="我的流程"></page-tab>
	<div class="ml-24 mr-24">
		<div class="relative" v-if="tableSelected == '资源信息'">
			<div class="border-b">
				<h3 class="font-14 color-gray">基础信息</h3>
				<ul class="line-height-34">
					<li>
						<span class="color-999">发起人 ：</span>
						<span>{{bpm.starterName || '--'}}</span>
					</li>
					<li>
						<span class="color-999">发起时间：</span>
						<span>{{bpm.startTime | formatUTCDate}}</span>
					</li>
					<li>
						<span class="color-999">备注：</span>
						<span>{{bpm.memo || '--'}}</span>
					</li>
				</ul>
			</div>
			<div class="mt-15">
				<h3 class="font-14 color-gray">资源信息</h3>
				<p class="color-999 line-height-34">总计{{ resources.length }}个房间，{{ buildingArea }}㎡</p>
				<div class="border line-height-45 text-center">
					<div class="rrat-flow-head dy-flex">
						<div class="dy-fx-1">序</div>
						<div class="dy-fx-3">项目</div>
						<div class="dy-fx-3">地块</div>
						<div class="dy-fx-2">楼栋</div>
						<div class="dy-fx-2">单元楼</div>
						<div class="dy-fx-2">楼层</div>
						<div class="dy-fx-2">房间</div>
					</div>
					<div class="dy-flex border-t" v-for="(item,index) in resources">
						<div class="dy-fx-1 border-r">{{index+1}}</div>
						<div class="dy-fx-3 border-r">{{item.projectName}}</div>
						<div class="dy-fx-3 border-r">{{item.stageAreaName}}</div>
						<div class="dy-fx-2 border-r">{{item.logicBuildingName}}</div>
						<div class="dy-fx-2 border-r">{{item.unitName}}</div>
						<div class="dy-fx-2 border-r">{{item.floorName}}</div>
						<div class="dy-fx-2">{{item.houseName}}（{{item.buildingArea}}㎡）</div>
					</div>
				</div>
			</div>

			<div class="mt-15 pb-10 mb-10" v-if=" queryParams.type != 'FN' && approveFlag == 'Y' ">
				<hl-button type="primary" @on-click="isShowAdopt">审核通过</hl-button>
				<hl-button type="outline" @on-click="isShowRefuse">审核不通过</hl-button>
			</div>
		</div>


		<!--流程信息-->
		<section class="pb-20" v-if="tableSelected == '流程信息'">
		  <div class="border-b pb-10">
		    <h4 class="block-title mt-15 font-14 pb-10">流程信息</h4>
		    <div class="dy-flex line-height-34" >
		      <div class="liuceng-title color-999">流程编号：</div>
		      <div class="item">{{bpm.bpmNo}}</div>
		    </div>
		    <div class="dy-flex line-height-34">
		      <div class=" liuceng-title color-999">耗时：</div>
		      <div class=" item">{{calculateTimeDifference(bpm.startTime,bpm.endTime)}}</div>
		    </div>
		    <div class="dy-flex line-height-34">
		      <div class=" liuceng-title color-999">发起人：</div>
		      <div class=" item">{{bpm.starterName || '--'}}</div>
		    </div>
		    <div class="dy-flex line-height-34">
		      <div class=" liuceng-title color-999">发起时间：</div>
		      <div class="col-md-3 item">{{bpm.startTime | formatUTCDate}}</div>
		    </div>
		    <div class="dy-flex line-height-34" v-if="bpm.userName">
		      <div class=" liuceng-title color-999">当前处理人：</div>
		      <div class=" line-height-34 pl-0">{{bpm.userName || '--'}}</div>
		    </div>
		    <div class="dy-flex line-height-34" v-if="bpm.currPhase">
		      <div class=" liuceng-title color-999">当前处理节点：</div>
		      <div class=" item">{{bpm.currPhase}}</div>
		    </div>
		    <div class="dy-flex line-height-34">
		      <div class=" liuceng-title color-999">流程版本号：</div>
		      <div class=" item">{{bpm.version}}</div>
		    </div>
		  </div>

		  <div class="pb-10 border-b">
		    <h4 class="block-title mt-15 font-14 pb-10">流程图</h4>
		    <div class="business-liuceng-image-cr">
		      <div class="content">
		        <div class="flowlist-image">
		          <div class="begin-circle">开始</div>
		          <div class="middle-node-container relative">
		            <ul class="middle-node-wrapper clearfix">
		              <li class="node-item" v-for="(item,index) in flowNode">
		                <div class="node-order">
		                  <span>{{index + 1}}</span>
		                </div>
		                <div class="node-name">{{item.name}}</div>
		                <p class="person" v-if="item.userNames.length">{{item.userNames.join('/')}}</p>
		              </li>
		            </ul>
		          </div>
		          <div class="end-circle">结束</div>
		        </div>
		      </div>
		    </div>
		  </div>

		  <div class="pb-10 mt-15" v-if="bpmList.length">
		    <h4 class="block-title pb-10">处理历史</h4>
		    <div class="deal-history-table box-i-shadow-1 br-4">
		      <div class="table-title">
		        <div class="table-item1">时间</div>
		        <div class="table-item2">处理人</div>
		        <div class="table-item3">操作说明</div>
		        <div class="table-item4">信息</div>
		      </div>
		      <ul class="table-content" v-for="item in bpmList">
		        <li class="table-item1">{{item.endTime | formatDetailDate}}</li>
		        <li class="table-item2">{{item.fnUserName | formatUndefined}}</li>
		        <li class="table-item3">{{item.taskName | formatUndefined}}</li>
		        <li class="table-item4">{{item.memo | formatUndefined}}</li>
		      </ul>
		    </div>
		  </div>
		</section>
	</div>

	<!-- 审批通过 -->
	<hl-dialog title="审核通过" :visible="isShowAdoptFlag" @on-close="isShowAdopt">
    <textarea rows="5" class="form-control" placeholder="审核通过原因说明（非必填）" v-model="isShowAdoptText"></textarea>
    <div slot="footer">
        <hl-button type="primary" @on-click="adopt">提交</hl-button>
        <hl-button type="outline" @on-click="isShowAdopt">取消</hl-button>
    </div>
	</hl-dialog>
	<!-- 审批拒绝 -->
	<hl-dialog title="审核不通过" :visible="isShowRefuseFlag" @on-close="isShowRefuse">
	  <textarea rows="5" class="form-control" placeholder="审核不通过原因说明（必填）" v-model="isShowRefuseText"></textarea>
	  <div slot="footer">
	      <hl-button type="primary" @on-click="refuse">提交</hl-button>
	      <hl-button type="outline" @on-click="isShowRefuse">取消</hl-button>
	  </div>
	</hl-dialog>
</section>

<style>
	.rrat-flow-head {
		  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
	}
</style>

<script src="modules/workbench/scripts/rratflow.js" charset="utf-8"></script>
